<template>
  <div>
    <!-- <swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">
      <swiper-slide class="slide-1">1</swiper-slide>
      <swiper-slide class="slide-2">2</swiper-slide>
      <swiper-slide class="slide-3">4</swiper-slide>
      <swiper-slide class="slide-4">5</swiper-slide>
      <swiper-slide class="slide-5">6</swiper-slide>
      <div
        class="swiper-button-next swiper-button-white"
        slot="button-next"
      ></div>
      <div
        class="swiper-button-prev swiper-button-white"
        slot="button-prev"
      ></div>
    </swiper> -->
    <!-- swiper2 Thumbs -->
    <ul class="tabs">
      <li
        v-for="(item, index) in cardList"
        :key="index"
        :class="{ actived: index === isActiveIndex }"
        @click="handlerClick('cardChange', index)"
      >
        {{ item.name }}
      </li>
    </ul>
    <swiper
      :options="swiperOptionThumbs"
      @slideChange="onSlideChange"
      class="gallery-thumbs"
      ref="swiperThumbs"
    >
      <swiper-slide
        class="slide-1"
        :style="{ 'z-index': isActiveIndex === 0 ? 999 : 0 }"
      >
        <div v-if="imageList.length" class="searchImageSlide">
          <div class="image-top" v-if="imageList[0]">
            <el-image
              :src="imageList[0]['image_link']"
                 @click="linktourl(imageList[0]['src'])"
              class="search-image-link"
              fit="cover"
            />
          </div>
          <div class="image-center">
            <div class="small-image" v-if="imageList[1]">
              <el-image
                :src="imageList[1]['image_link']"
                @click="linktourl(imageList[1]['src'])"
                class="search-image-link"
                fit="cover"
              />
            </div>
            <div class="small-image" v-if="imageList[2]">
              <el-image
                :src="imageList[2]['image_link']"
                @click="linktourl(imageList[2]['src'])"
                class="search-image-link"
                fit="cover"
              />
            </div>

            <div class="small-image" v-if="imageList[3]">
              <el-image
                :src="imageList[3]['image_link']"
                @click="linktourl(imageList[3]['src'])"
                class="search-image-link"
                fit="cover"
              />
            </div>
            <div
              class="small-image small-image-last"
              v-if="imageList.length > 4"
            >
              <div class="search-image-result-all">
                <div class="search-image-result">
                  <div
                    v-for="(resultItem, resultItemKey) in imageList.slice(4, 7)"
                    :key="resultItemKey"
                    class="image-result-item"
                    @click="linktourl(resultItem['src'])"
                  >
                    <el-image
                      :src="resultItem['image_link']"
                      class="search-image-result-link"
                      fit="cover"
                    />
                  </div>
                </div>
                <div class="get-more" @click="linkToImagePage(send)">
                  <svg-icon icon-class="pic" class="more-pic" />查看更多
                </div>
              </div>
            </div>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide
        class="slide-2"
        :style="{ 'z-index': isActiveIndex === 1 ? 999 : 0 }"
      >
        <MarkmapRender
          :content="markmapContent"
          :markmapid="markmapid"
          @click.native.stop="(e) => markmappop(e, markmapContent)"
        ></MarkmapRender>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
// import 'swiper/css';
// import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import MarkmapRender from "@/components/markmap/index";
export default {
  props: {
    showOnlyImage:{
      type: Boolean,
      default: false,
    },
    imageList: {
      type: Array,
      default: () => [],
    },
    isMarkmapContentDone: {
      type: Boolean,
      default: false,
    },
    markmapid: {
      type: Number,
      default: "",
    },
    markmapContent: {
      type: String,
      default: "",
    },
    send: {
      type: String,
      default: "",
    },
  },
  components: {
    MarkmapRender,
  },
  data() {
    return {
      activeTab: "t1",
      isActiveIndex: 0,
      cardList: [{ name: "图片" }, { name: "脑图" }],
      //   swiperOptionTop: {
      //     spaceBetween: 10,
      //     navigation: {
      //       nextEl: ".swiper-button-next",
      //       prevEl: ".swiper-button-prev",
      //     },
      //     on: {
      //       // 该方法中的this都指代swiper本身
      //       tap: function () {
      //         console.log("点击的位置", this.activeIndex);
      //       },
      //     },
      //   },
      swiperOptionThumbs: {
        effect: "fade",
        fadeEffect: {
          crossFade: true, //开启淡出。过渡时，原slide透明度从1->0（淡出），过渡中的slide透明度从0->1（淡入），其他slide透明度0。
        },
        autoplay: 2000,
        paginationClickable: true,
        preventClicksPropagation: true,
        pagination: ".swiper-pagination",

        autoplayDisableOnInteraction: false,
        on: {
          slideChange: function () {
            // this.isActiveIndex = Number(this.activeIndex)
            // console.log( this.isActiveIndex );
          },
        },
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.swiperThumbs.swiper;
    },
  },

  mounted() {
    this.$nextTick(() => {
      //   const swiperTop = this.$refs.swiperTop.swiper;
      //   const swiperThumbs = this.$refs.swiperThumbs.swiper;
      //   swiperTop.controller.control = swiperThumbs;
      //   swiperThumbs.controller.control = swiperTop;
    });
  },
  methods: {
    linktourl(src) {
      window.open(src, "_blank");
    },
    onSlideChange(e) {
      //   console.log(this.$refs.swiperThumbs, realIndex,"###");
      var realIndex = this.$refs.swiperThumbs.swiper.realIndex;
      this.isActiveIndex = realIndex;
    },
    markmappop(e, message) {
      console.log(e, "##########");
      this.$emit("markmappop", message);
    },
    linkToImagePage(message) {
      this.$emit("imagepop", message);
    },
    handlerClick(action, data) {
      if (action == "cardChange") {
        //tab切换
        this.loading = true;

        if (data === 1) {
          // console.log(this.isMarkmapContentDone,"??????")
          if (this.isMarkmapContentDone) {
            this.isActiveIndex = data;
            this.swiper.slideTo(this.isActiveIndex);
          }
        } else if (data === 0) {
          this.isActiveIndex = data;
          this.swiper.slideTo(this.isActiveIndex); //swiper滑动到相对应的滑块
        }

        // document.documentElement.scrollTop = document.body.scrollTop = 0;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.tabs {
  display: flex;
  margin-bottom: 5px;
  li {
    display: flex;
    align-items: center;
    height: 35px;
    color: #167dd7;
    font-weight: bold;
    background: #eef6ff;
    padding: 0 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.5s;
    margin-right: 5px;
    font-size: 14px;
    &.actived {
      color: #ffffff;
      background: #167dd7;
    }
  }
}
.searchImageSlide {
  width: 100%;
  .image-top {
    height: 200px;
    margin-bottom: 5px;
    cursor: pointer;
  }
  .search-image-link {
    height: 100%;
    width: 100%;
  }
  .image-center {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(2, 1fr);

    .small-image {
      height: 90px;
      background: #f5f5f5;
      box-sizing: border-box;
      cursor: pointer;
    }
    .small-image-last {
      padding: 8px;
    }
  }
  .search-image-result-all {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }

  .search-image-result {
    display: flex;
    justify-content: space-between;

    height: 40px;
    .image-result-item {
      border-radius: 10px;
      overflow: hidden;
      width: 38px;
      height: 38px;
    }
    .search-image-result-link {
      height: 100%;
      width: 100%;
    }
  }

  .el-tab-pane {
  }

  .get-more {
    display: flex;
    align-items: center;
    height: 25px;
    cursor: pointer;
  }
  .more-pic {
    width: 20px;
    height: 20px;
  }
}

.swiper-container {
}
.swiper-slide {
  background-size: cover;
  background-position: center;
}
.gallery-top {
  height: 80% !important;
  width: 100%;
}
.gallery-thumbs {
  height: 20% !important;
  box-sizing: border-box;
}
.gallery-thumbs .swiper-slide {
  height: 100%;
  // opacity: 0.4;
  pointer-events: auto;
}
// .gallery-thumbs .swiper-slide-active {
//   opacity: 1;
// }
</style>